import React ,{FC,Fragment,useEffect,useCallback} from 'react'
import {ProductCard,Image, GridItem} from "react-vant"
import BetterScroll from "better-scroll"
import { CartO } from '@react-vant/icons'
import {DataItem,RootDispatch} from "../utils/index"
import {add_list,get_list} from '../api/index'
import {useDispatch} from "react-redux"
import {useNavigate} from "react-router-dom"
import * as api from "../api/index"
type Props = {
    children_data:DataItem[],
    active:number
}

let BS:BetterScroll 

const My_content:FC<Props> = ({children_data,active}) => {
    const navigate = useNavigate ()
    const dispatch:RootDispatch = useDispatch()
    useEffect(() => {
        let All_conetnt:any = window.document.querySelectorAll(".rv-sidebar__content")
        BS = new BetterScroll(All_conetnt[active], {
            // 让 betterScroll 完全不干涉点击事件 直接使用原生事件
            click:false,
            preventDefault:false,
            probeType:3,
            pullUpLoad:true,
            pullDownRefresh:true,
        })
        // console.log(BS);
        BS.on("pullingUp", pullingUp) // 上拉加载数据
        BS.on("pullingDown", pullingDown)
        // 销毁
        return () =>{
            BS.destroy()
        }
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [active])
    
    const pullingUp = () => {
        console.log("pullingUp");
        dispatch(add_list())
        BS.finishPullUp()
        BS.refresh()
    }

    const pullingDown = () =>{
        console.log("pullingDown");
        dispatch(get_list())
        window.location.reload()
        BS.finishPullDown()
    }
  return (
    <div>
        {
            children_data.map((child:DataItem,i:number) =>(<Fragment  key={i}>
               <ProductCard
                    onClick={()=>navigate("/details/"+child.id,{state:child})}
                    num={child.num}
                    price={child.price}
                    desc="描述信息"
                    title={child.title}
                    thumb={
                        <>
                            <Image lazyload src={child.img}/>
                        </>
                    }
                    footer={
                        <>
                            <CartO onClick={(e)=>{
                                e.stopPropagation();
                                dispatch(api.add_shopcar_data(child))
                            }}  color={"#f44336"} fontSize={"20px"}/>
                        </>
                    }
                    />
            </Fragment>))
        }
    </div>
  )
}

export default My_content